<template>
  <div class="rh-button">
    <div class="btn"
         @click="click"
         ref="btn">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    type: {
      default: 'f10'
    },
    disabled: {
      default: false
    }
  },
  watch: {
    disabled () {
      if (this.disabled == true) {
        this.$refs.btn.classList.add('disabled');
        this.$refs.btn.classList.remove(this.type);
      }
    }
  },
  mounted () {
    if (this.disabled == true) {
      this.$refs.btn.classList.add('disabled');
    } else {
      this.$refs.btn.classList.add(this.type);
    }
  },
  methods: {
    click () {
      if (this.disabled == true) {
        return;
      }
      this.$emit('click');
    }
  }
}
</script>

<style lang="less" scoped>
.rh-button {
  display: inline-block;
  height: 40px;

  .btn {
    box-sizing: border-box;
    padding: 12px 20px;
    border-radius: 5px;
    font-size: 14px;
    line-height: 1.2;
    cursor: pointer;
    color: #fff;
    text-align: center;
  }
  .f10 {
    background-image: linear-gradient(to right, #f30, #f10);
  }
  .f30 {
    background-image: linear-gradient(to right, #f50, #f30);
  }
  .disabled {
    background-color: #909399 !important;
  }
}
</style>